<template>
  <div class="equipment-management-container">
    <div class="left-container">
      <el-card class="box-card">
        <div slot="header" style="padding: 5px">
          <span class="tree-title">区域</span>
        </div>
        <div class="tree-container">
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :render-content="renderContent"
          >
          </el-tree>
        </div>
      </el-card>
    </div>
    <div class="right-container">
      <el-form inline label-width="20px">
        <el-form-item>
          <el-input
            v-model="queryForm.equipmentTag"
            placeholder="请输入位号"
            size="small"
            style="width: 200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <div style="margin-bottom: 20px">
        <el-button type="primary" size="small" @click="handleAdd"
          >添加装置</el-button
        >
      </div>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="calc(100% - 200px)"
        :header-cell-style="{
          backgroundColor: '#fafafa',
          fontWeight: 'bold',
          color: '#252525',
        }"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '8px 0' }"
      >
        <el-table-column label="序号" type="index" width="80">
          <template slot-scope="scope">
            <span> {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceName" label="装置名称" />
        <el-table-column prop="deviceNo" label="装置编号" />
        <el-table-column prop="deviceType" label="装置类型" />
        <el-table-column prop="deviceArea" label="装置区域" />
        <el-table-column prop="deviceStatus" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.deviceStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleStatusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: #f56c6c"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; text-align: right">
        <el-pagination
          :total="total"
          :page-size="pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="cancelDialog"
    >
      <el-form :model="editForm" label-width="100px" :rules="rules" ref="editFormRef">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="装置名称" prop="deviceName">
              <el-input v-model="editForm.deviceName" maxlength="50" placeholder="请输入装置名称" show-word-limit/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装置编号" prop="deviceNo">
              <el-input v-model="editForm.deviceNo" maxlength="50" placeholder="请输入装置编号" show-word-limit/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="装置类型" prop="deviceType">
              <el-select v-model="editForm.deviceType" style="width: 100%" placeholder="请选择装置类型">
                <el-option label="装置类型1" value="1" />
                <el-option label="装置类型2" value="2" />
                <el-option label="装置类型3" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装置区域" prop="deviceArea">
              <el-select v-model="editForm.deviceArea" style="width: 100%" placeholder="请选择装置区域">
                <el-option label="装置区域1" value="1" />
                <el-option label="装置区域2" value="2" />
                <el-option label="装置区域3" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="开启状态">
              <el-switch
                v-model="editForm.deviceOpenStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="editForm.deviceRemark" type="textarea"  :rows="4" maxlength="200" placeholder="请输入备注" show-word-limit/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EquipmentManagement",
  data() {
    return {
      data: [
        {
          label: "区域1",
          level: 1,
          children: [
            {
              label: "区域1-1",
              level: 2,
              children: [
                { label: "区域1-1-1", level: 3 },
                { label: "区域1-1-2", level: 3 },
              ],
            },
            { label: "区域1-2", level: 2 },
          ],
        },
      ],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          deviceName: "装置1",
          deviceNo: "123456",
          deviceType: "装置类型1",
          deviceArea: "装置区域1",
          deviceStatus: true,
        },
      ],
      queryForm: {
        equipmentTag: null,
      },
      rules: {
        deviceName: [{ required: true, message: "请输入装置名称", trigger: "blur" }],
        deviceNo: [{ required: true, message: "请输入装置编号", trigger: "blur" }],
        deviceType: [{ required: true, message: "请选择装置类型", trigger: "change" }],
        deviceArea: [{ required: true, message: "请选择装置区域", trigger: "change" }],
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      iconBase64:
        "",
      dialogVisible: false,
      dialogTitle: "",
      editForm: {
        deviceName: "",
        deviceNo: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {},
    handleAdd() {
      this.dialogVisible = true;
      this.dialogTitle = "添加装置";
    },
    handleStatusChange(row) {
      console.log(row);
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.editForm = {
        deviceName: "",
        deviceNo: "",
        deviceType: "",
        deviceArea: "",
        deviceOpenStatus: false,
        deviceRemark: "",
      };
      this.$refs.editFormRef.resetFields();
    },
    handleConfirm() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          this.getList();
        }
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getList();
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑装置";
      this.editForm = row;
    },
    handleDelete(row) {
      this.$confirm("确定删除该项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.getList();
      });
    },
    handleNodeClick(data) {
      console.log(data);
    },
    renderContent(h, { data }) {
      // 只在前两层显示图标
      const showIcon = data.level <= 2;

      return h(
        "span",
        {
          class: "custom-tree-node",
        },
        [
          // 如果是前两层，显示图标
          showIcon
            ? h("img", {
                attrs: {
                  src: this.iconBase64,
                  alt: "icon",
                },
                class: "tree-node-icon",
              })
            : null,
          // 节点标签
          h(
            "span",
            {
              class: "tree-node-label",
            },
            data.label
          ),
        ]
      );
    },
  },
};
</script>

<style scoped lang="scss">
.equipment-management-container {
  display: flex;
  height: 100%;
  width: 100%;
  padding: 10px;
}

.left-container {
  width: 400px;
  height: 100%;
  margin-right: 10px;
  border-radius: 5px;

  .tree-title {
    font-size: 16px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #303133;
    margin-bottom: 0;
  }

  .tree-container {
    width: 100%;
    height: calc(100vh - 185px);
    overflow-y: auto;
  }

  :deep(.el-card__body) {
    padding: 5px;
  }

  // 自定义树节点样式
  :deep(.custom-tree-node) {
    display: flex;
    align-items: center;

    .tree-node-icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }

    .tree-node-label {
      font-size: 14px;
      color: #606266;
    }
  }
}

.right-container {
  flex: 1;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}
</style>
